<template>
  <div class="messages-list" ref="messagesListRef">
    <div
      v-for="(message, index) in messages"
      :key="index"
      :class="[(message.sender === 'chat' || message.sender == 1) ? 'message-item' : 'message-item user-message']"
    >
      <div class="message-content">
        <img
          v-if="(message.sender === 'chat' || message.sender == 1)"
          class="chat-img"
          src="@/assets/images/robot.png"
          alt="chat"
        />
        <div class="message-wrapper">
          <!-- 图片显示 -->
          <div v-if="message.images && message.images.length > 0" class="message-images">
            <div
              v-for="(image, imgIndex) in message.images"
              :key="imgIndex"
              class="image-item"
              @click="previewImage(image.url)"
            >
              <img :src="image.url" :alt="image.name" class="message-image" />
            </div>
          </div>
          <!-- 文本内容 -->
          <div v-if="message.content" class="message" v-html="message.content"></div>
        </div>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog v-model="imagePreviewVisible" title="图片预览" width="80%" :show-close="true" center>
      <div class="image-preview-container">
        <img :src="previewImageUrl" alt="预览图片" class="preview-image" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import type { ChatMessage } from '@/types/chat'
// 导入 highlight.js 样式
import 'highlight.js/styles/github.css'

interface Props {
  messages: ChatMessage[]
}

const props = defineProps<Props>()

const messagesListRef = ref<HTMLDivElement | null>(null)
const imagePreviewVisible = ref(false)
const previewImageUrl = ref('')

// 滚动到消息列表底部
function scrollToBottom() {
  nextTick(() => {
    if (messagesListRef.value) {
      messagesListRef.value.scrollTop = messagesListRef.value.scrollHeight
    }
  })
}

// 预览图片
function previewImage(url: string) {
  previewImageUrl.value = url
  imagePreviewVisible.value = true
}

// 监测消息列表变化并滚动到底部
watch(
  () => props.messages,
  () => {
    scrollToBottom()
  },
  { deep: true },
)

// 暴露滚动方法给父组件
defineExpose({
  scrollToBottom,
})
</script>

<style lang="scss" scoped>
.messages-list {
  height: calc(100% - 100px);
  overflow: scroll;
  background-color: transparent;
  margin-top: 70px;

  &::-webkit-scrollbar {
    display: none;
  }

  .message-item {
    min-height: calc(48px * var(--height-ratio));
    margin-bottom: calc(30px * var(--height-ratio));

    .message-content {
      display: flex;
      justify-content: start;
      align-items: flex-start;

      .chat-img {
        padding-top: calc(5px * var(--height-ratio));
        width: calc(38px * var(--width-ratio));
        height: calc(38px * var(--width-ratio));
      }

      .message-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .message-images {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 8px;

          .image-item {
            cursor: pointer;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e0e0e0;
            transition: transform 0.2s;

            &:hover {
              transform: scale(1.02);
            }

            .message-image {
              width: 120px;
              height: 120px;
              object-fit: cover;
              display: block;
            }
          }
        }

        .message {
          padding: 12px 20px;
          white-space: pre-wrap;
          word-wrap: break-word;
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #333333;
          line-height: 24px;
          font-weight: 400;

          // Markdown 标题样式 (H1-H6)
          :deep(h1) {
            font-size: 2em;
            font-weight: 600;
            margin: 1.5em 0 0.5em 0;
            color: #1a1a1a;
            border-bottom: 2px solid #e1e4e8;
            padding-bottom: 0.3em;
          }

          :deep(h2) {
            font-size: 1.5em;
            font-weight: 600;
            margin: 1.25em 0 0.5em 0;
            color: #1a1a1a;
            border-bottom: 1px solid #e1e4e8;
            padding-bottom: 0.3em;
          }

          :deep(h3) {
            font-size: 1.25em;
            font-weight: 600;
            margin: 1em 0 0.5em 0;
            color: #1a1a1a;
          }

          :deep(h4) {
            font-size: 1em;
            font-weight: 600;
            margin: 1em 0 0.5em 0;
            color: #1a1a1a;
          }

          :deep(h5) {
            font-size: 0.875em;
            font-weight: 600;
            margin: 1em 0 0.5em 0;
            color: #1a1a1a;
          }

          :deep(h6) {
            font-size: 0.85em;
            font-weight: 600;
            margin: 1em 0 0.5em 0;
            color: #6a737d;
          }

          // 段落样式
          :deep(p) {
            margin: 0.5em 0;
            line-height: 1.6;
          }

          // 列表样式
          :deep(ul) {
            margin: 0.5em 0;
            padding-left: 2em;

            li {
              margin: 0.25em 0;
              line-height: 1.5;
            }
          }

          :deep(ol) {
            margin: 0.5em 0;
            padding-left: 2em;

            li {
              margin: 0.25em 0;
              line-height: 1.5;
            }
          }

          // 链接样式
          :deep(a) {
            color: #0366d6;
            text-decoration: none;

            &:hover {
              text-decoration: underline;
            }
          }

          // 粗体样式
          :deep(strong) {
            font-weight: 600;
            color: #1a1a1a;
          }

          // 斜体样式
          :deep(em) {
            font-style: italic;
            color: #586069;
          }

          // 分割线样式
          :deep(hr) {
            height: 0.25em;
            padding: 0;
            margin: 24px 0;
            background-color: #e1e4e8;
            border: 0;
          }

          // 行内代码样式
          :deep(code) {
            background-color: rgba(175, 184, 193, 0.2);
            padding: 0.2em 0.4em;
            border-radius: 3px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 0.85em;
            color: #e83e8c;
          }

          // 代码块样式
          :deep(pre) {
            background-color: #f6f8fa;
            border-radius: 6px;
            padding: 16px;
            overflow-x: auto;
            margin: 1em 0;
            border: 1px solid #e1e4e8;

            code {
              background-color: transparent;
              padding: 0;
              border-radius: 0;
              font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
              font-size: 0.85em;
              color: inherit;
              white-space: pre;
              word-wrap: normal;
            }
          }

          // 表格样式
          :deep(table) {
            border-collapse: collapse;
            width: 100%;
            margin: 1em 0;
            color: #24292e;
            background-color: transparent;
            border-spacing: 0;
            display: block;
            overflow: auto;
            display: flex;

            // 响应式表格
            @media (max-width: 768px) {
              font-size: 0.875em;
            }
            tbody {
              margin: auto;
            }

            thead {
              background-color: #f6f8fa;
            }

            th {
              font-weight: 600;
              padding: 6px 13px;
              border: 1px solid #d0d7de;
              background-color: #f6f8fa;
              text-align: left;
            }

            td {
              padding: 6px 13px;
              border: 1px solid #d0d7de;
              vertical-align: top;
            }

            tr {
              background-color: #ffffff;
              border-top: 1px solid #d0d7de;

              &:nth-child(2n) {
                background-color: #f6f8fa;
              }
            }

            // 移动端表格滚动
            @media (max-width: 768px) {
              display: block;
              overflow-x: auto;
              white-space: nowrap;

              th, td {
                min-width: 100px;
              }
            }
          }

          // Think 标签特殊样式
          :deep(.think-content) {
            background-color: #f8f9fa;
            border-left: 4px solid #6c757d;
            padding: 12px 16px;
            margin: 1em 0;
            border-radius: 0 4px 4px 0;
            font-style: italic;
            color: #6c757d;
            position: relative;

            &::before {
              content: '💭 思考过程';
              font-size: 0.75em;
              font-weight: 600;
              color: #495057;
              font-style: normal;
              display: block;
              margin-bottom: 8px;
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }

            // Think 标签内的 Markdown 元素样式调整
            h1, h2, h3, h4, h5, h6 {
              color: #495057 !important;
              margin: 0.5em 0 0.25em 0 !important;
            }

            p {
              color: #6c757d;
              margin: 0.25em 0;
            }

            code {
              background-color: rgba(108, 117, 125, 0.1);
              color: #495057;
            }

            pre {
              background-color: rgba(108, 117, 125, 0.05);
              border: 1px solid rgba(108, 117, 125, 0.2);

              code {
                color: #495057;
              }
            }

            ul, ol {
              color: #6c757d;
            }

            strong {
              color: #495057;
            }

            a {
              color: #495057;
            }
          }

          // 引用块样式
          :deep(blockquote) {
            margin: 1em 0;
            padding: 0 1em;
            color: #6a737d;
            border-left: 0.25em solid #dfe2e5;
            background-color: #f6f8fa;
            border-radius: 0 3px 3px 0;

            p {
              margin: 0.5em 0;
            }

            // 嵌套引用
            blockquote {
              margin: 0.5em 0;
              border-left-color: #c6cbd1;
            }
          }

          // 链接悬停效果增强
          :deep(a) {
            color: #0366d6;
            text-decoration: none;
            transition: all 0.2s ease;

            &:hover {
              text-decoration: underline;
              color: #0256cc;
            }

            &:visited {
              color: #6f42c1;
            }

            &:active {
              color: #d73a49;
            }
          }

          // 删除线样式
          :deep(del) {
            text-decoration: line-through;
            color: #6a737d;
          }

          // 下标和上标
          :deep(sub) {
            font-size: 0.75em;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
            bottom: -0.25em;
          }

          :deep(sup) {
            font-size: 0.75em;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
            top: -0.5em;
          }

          // 键盘按键样式
          :deep(kbd) {
            display: inline-block;
            padding: 3px 5px;
            font-size: 0.75em;
            line-height: 10px;
            color: #444d56;
            vertical-align: middle;
            background-color: #fafbfc;
            border: solid 1px #c6cbd1;
            border-bottom-color: #959da5;
            border-radius: 3px;
            box-shadow: inset 0 -1px 0 #959da5;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
          }

          // 响应式适配
          @media (max-width: 768px) {
            padding: 8px 12px;
            font-size: 14px;
            line-height: 22px;

            :deep(h1) {
              font-size: 1.5em;
            }

            :deep(h2) {
              font-size: 1.25em;
            }

            :deep(h3) {
              font-size: 1.125em;
            }

            :deep(pre) {
              padding: 12px;
              font-size: 0.8em;
            }

            :deep(blockquote) {
              padding: 0 0.75em;
              margin: 0.75em 0;
            }
          }

          @media (max-width: 480px) {
            padding: 6px 10px;
            font-size: 13px;
            line-height: 20px;

            :deep(h1) {
              font-size: 1.25em;
            }

            :deep(h2) {
              font-size: 1.125em;
            }

            :deep(pre) {
              padding: 8px;
              font-size: 0.75em;
            }
          }
        }
      }
    }
  }

  .user-message {
    .message-content {
      justify-content: end;

      .chat-img {
        display: none;
      }

      .message-wrapper .message {
        background: #baf0d8;
        border-radius: 10px;
      }
    }
  }


}

// 图片预览样式
.image-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;

  .preview-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }
}
</style>
